<template>
  <div id="knowledge-page" class="knowledge-box">
    <div class="knowledge-top">
      <div v-for="(item,index) in typeList" :key="index" class="knowledge-item"
        :class="[typeActive==item.value && 'knowledge-item-active']" @click="changeType(item.value)">
        {{$t(item.label)}}
      </div>
    </div>
    <mobileSearch></mobileSearch>
    <div class="knowledge-body">
      <mobileScroll :ops="scrollOps" :openPullDown="true" :openUpload="false" @refreshStart="handleRS" v-if="knowldegeList.length!=0">
        <div class="knowledge-list-box">
          <div v-for="(item,index) in knowldegeList" :key="index" class="knowledge-item" @click="goKnowledgeInfo(item)">
            <div class="knowledge-cover" :style="item.color ? ('background-image: url('+ item.color + ');') : `background-image: url('/jvs-public/img/风景/a4.png')`">
              <div class="type-mark" :class="[item.shareRole === 'user'&&'user-mark',item.shareRole === 'register'&&'registry-mark',item.shareRole === 'all'&&'all-mark']">
                {{item.shareRole === 'register'?$t('message.typeMenu.enterprise'):item.shareRole === 'user'?$t('message.typeMenu.private'):$t('message.typeMenu.wholeNetwork')}}
              </div>
            </div>
            <div class="knowledge-info-box">
              <div class="knowledge-name">
                {{item.name}}
              </div>
              <div class="knowledge-info">
                {{item.description}}
              </div>
            </div>
          </div>
        </div>
      </mobileScroll>
      <jvs-empty imgSrc="@/assets/images/common/empty.png" v-if="knowldegeList.length==0"></jvs-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileSearch from './mobileSearch.vue'
import { setSessionStore, getSessionStore,getStore } from '@/utils/store.js'
import { getDcLibraryList } from '@/api/knowledge'
import mobileScroll from './mobileScroll.vue'
import { useRoute, useRouter } from "vue-router"
const router = useRouter();
const route = useRoute()
const emit = defineEmits([""])
const props = defineProps({

})

const typeList = [
  {label:'message.silder.allLibraries',value:'all'},
  {label:'message.typeMenu.wholeNetwork',value:'allWeb'},
  {label:'message.typeMenu.enterprise',value:'register'},
  {label:'message.typeMenu.private',value:'user'},
]
const typeActive = ref('all')
const knowldegeList = ref([])
const routerList = ref([])
const scrollOps = ref({
  click:true,
  observeDOM: true,
  probeType: 3,
  pullDownRefresh: {
    threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
    stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
  },
  pullUpLoad: true,
  bounce:{
    top:false,
    bottom:false
  }
  // bar: {
  //   background: '#cecece',
  //   onlyShowBarOnScroll:false,
  //   minSize:0.1
  // },
  // pushLoad:false,
  // vuescroll: {
  //   mode: 'slide',
  //   pullRefresh: {
  //     enable: true,
  //     tips:{
  //       deactive: '下拉刷新',
  //       active: '释放刷新',
  //       start: '刷新中...',
  //       beforeDeactive: '刷新成功!'
  //     }
  //   },
  // }
})

onMounted(()=>{
  routerList.value = getSessionStore({name:'mobileRouterList'}) || []
  init()
})

function handleRS(done){
  if(!getStore({name: 'userInfo'})) {done();return}
  init(done,true)
}
function init(done){
  if(!getStore({name: 'userInfo'})) return
  let shareRole = null
  switch (typeActive.value) {
    case 'allWeb':
      shareRole = 'all'
      break;
    case 'register':
      shareRole = 'register'
      break;
    case 'user':
      shareRole = 'user'
      break;
    default:
      break;
  }
  getDcLibraryList({size:1000,shareRole:shareRole}).then(res => {
    if(res && res.data && res.data.code == 0) {
      knowldegeList.value = res.data.data.records
      if(done) {
        done()
        proxy.$mobileToast({
          text:$t('message.message.refreshSuccess'),
          top:'7rem'
        })
      }
    }
  }).finally(res=>{
    if(done) done()
  })
}
function changeType(value){
  if(value!=typeActive.value){
    typeActive.value = value
  }
  init()
}
function goKnowledgeInfo(item){
  let currentPath = route.fullPath
  if(routerList.value.indexOf(currentPath)!=-1){
    routerList.value.splice(routerList.value.indexOf(currentPath),1)
  }
  routerList.value.push(currentPath)
  setSessionStore({name:'mobileRouterList',content:routerList.value})
  router.push({
    path:'/mobile/knowledgeinfo',
    query:{
      id:item.id
    }
  })
}
</script>
<style lang="scss" scoped>
.knowledge-box{
  padding: 16px 0rem 0rem;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  .knowledge-top{
    display: flex;
    align-items: flex-end;
    padding: 0px .9375rem;
    margin-bottom: 1rem;
    .knowledge-item{
      color: #6f7588;
      font-size: .875rem;
      @include SourceHanSansCN-Regular;
    }
    .knowledge-item-active{
      color: #363b4c;
      font-size: 1.125rem;
      font-weight: 700;
      @include SourceHanSansCN-Bold;
      margin-bottom: -0.125rem;
    }
    .knowledge-item+.knowledge-item{
      margin-left: 1.75rem;
    }
  }
  .knowledge-body{
    height:calc(100% - 6.125rem);
    .knowledge-list-box{
      position: relative;
      padding: 0px .9375rem .75rem;
      // display: flex;
      // flex-wrap: wrap;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      column-gap:.75rem;
      row-gap: .75rem;
      .knowledge-item{
        border-radius: .1875rem;
        background-color: #f5f6f7;
        padding: .75rem;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        .knowledge-cover{
          position: relative;
          height: 8.875rem;
          width: 100%;
          border-radius: .1563rem;
          background-image: url('../../assets/images/common/bg.png');
          background-repeat: no-repeat;
          background-size: cover;
          .type-mark{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 2.375rem;
            height: 1.25rem;
            border-radius: .1563rem 0px 2.5px 0px;
            font-weight: 400;
            @include SourceHanSansCN-Regular;
            font-size: .6875rem;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .user-mark{
            background: #FFE7ED;
            color: #ff194c;
          }
          .registry-mark{
            background: #E9F7EC;
            color: #36B452;
          }
          .all-mark{
            background: #E8F0FF;
            color: #1E6FFF;
          }
        }
        .knowledge-info-box{
          margin-top: .75rem;
          width: 9.375rem;
          .knowledge-name{
            font-size: 1rem;
            @include SourceHanSansCN-Medium;
            font-weight: 500;
            color: #363B4C;
            margin-bottom: .125rem;
            width: 9.375rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .knowledge-info{
            font-size: .75rem;
            @include SourceHanSansCN-Regular;
            font-weight: 400;
            color: #6F7588;
            width: 9.375rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

          }
        }
      }
    }
  }
}
</style>